<template>
<div class="record-dialog dialog">
  <q-dialog   v-model="isShowRecordDialog"
              persistent
              transition-show="scale"
              transition-hide="scale">
      <q-card v-drag style="margin: 0 10px;box-shadow:none;min-width:600px; height:343px" >
        <q-card-section class="dialog-title bg-primary" >
          <div class="text-center text-white dialog-title" style="padding-left: 0;text-align: left;">
            <span class="font-size-16">记录</span>
            <q-btn style="font-size: 18px;color: white"
                   flat
                   round
                   dense
                   class="iconfont icontubiao-67 white close-btn dialog"
                   @click="$emit('close')" />
          </div>
        </q-card-section>
        <q-scroll-area class="box-content bg-white" :thumb-style="thumbStyle" style="height:300px ;padding: 0 20px">
          <div>
            <div v-for="(item,index) in qualityLogs" :key="index" class="log-item">
              <span>{{item.newDate}}</span>
              <span>{{item.name}}</span>
              <span>{{item.message}}</span>
              <span>{{item.label}}</span>
              <span>{{item.count}}</span>
            </div>
          </div>
        </q-scroll-area>
      </q-card>
    </q-dialog>
    </div>
</template>
<script>
import { getQualityLogs } from '../../../boot/job/quality-order'
import moment from 'moment'
export default {
  name: 'record-dialog',
  props: {
    isShowRecordDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    msg: Object,
    recordData: Object
  },
  data () {
    return {
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      qualityLogs: [] // 录入记录
    }
  },
  watch: {
    'recordData.id': {
      handler (val) {
        if (val) {
          this.getQualityLogs(val)
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
  },
  methods: {
    // 获取质检记录
    getQualityLogs (val) {
      const params = {
        id: val
      }
      getQualityLogs(params).then(res => {
        res.data.forEach(i => {
          i.newDate = moment(i.time).format('YYYY-MM-DD HH:mm:ss')
        })
        this.qualityLogs = res.data
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .table-flat-btn{
    min-width auto
    font-weight initial
  }
  .log-item{
    font-size 14px
    border-bottom 1px solid #D3D3D3
    line-height 40px
    span {
      margin-right 30px
    }
  }&:last-child{
     border none
     }
  .bordered,.bordered:last-child {
    border-bottom  1px
    border-top 0
    border 1px solid #D3D3D3
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
</style>
